<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>学生</title>
    <link rel="stylesheet" href="./bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="./bootstrap/bootstrap-icons.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <style>
      .text {
        font-size: 12px;
        margin: 0;
        padding: 5px 20px;
        color: #999;
      }

      .card i:hover {
        cursor: pointer;
      }

      .bt-1 {
        margin-top: 4px;
      }

      .card-fluid {
        border: none;
        padding: 15px;
      }

      .card .table th {
        border-color: transparent;
      }

      .form-group {
        display: flex;
        align-items: center;
        height: calc(1.5em + 1.5rem + 2px);
      }

      .form-group > label {
        width: 100px;
        text-align: right;
        padding-right: 10px;
        margin-bottom: 0;
      }

      .form-group > input {
        flex: 1;
      }

      .form-group .input {
        flex: 1;
        padding-left: 10px;
        display: flex;
      }

      .form-group .form-check {
        margin-bottom: 0;
        margin-right: 30px;
      }

      .form-group .input select {
        width: 140px;
        margin-right: 20px;
      }

      .custom-select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23999999' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
        background-size: 12px 12px;
      }
    </style>
  </head>

  <body class="application application-offset">
    <div class="container-fluid container-application">
      <div class="sidenav show" id="sidenav-main">
        <!-- Sidenav header -->
        <div class="sidenav-header d-flex align-items-center">
          <a class="navbar-brand" href="./index.html">
            <span class="logo">·ITCAST·</span>
          </a>
        </div>
        <!-- User mini profile -->
        <div
          class="sidenav-user d-flex flex-column align-items-center justify-content-between text-center"
        >
          <!-- Avatar -->
          <div>
            <a href="#" class="avatar rounded-circle avatar-xl">
              <img
                alt="Image placeholder"
                src="https://yanxuan-item.nosdn.127.net/8b27deb1670c53e67c42ca3e1ed6fd12.jpg"
                class=""
              />
            </a>
            <div class="mt-5">
              <h5 class="mb-0 text-white">黑马前端</h5>
              <span class="d-block text-sm text-white opacity-8 mb-3"
                >数据可视化</span
              >
              <a
                href="javascript:;"
                class="btn btn-sm btn-white btn-icon rounded-pill shadow hover-translate-y-n3"
              >
                <span class="btn-inner--text">学前端来黑马</span>
              </a>
            </div>
          </div>
        </div>
        <!-- Application nav -->
        <div class="nav-application clearfix">
          <a href="./index.html" class="btn btn-square text-sm">
            <span class="btn-inner--icon d-block"
              ><i class="bi bi-house bi-2x"></i
            ></span>
            <span class="btn-inner--icon d-block pt-2">首页</span>
          </a>
          <a href="./student.html" class="btn btn-square text-sm active">
            <span class="btn-inner--icon d-block"
              ><i class="bi bi-people bi-2x"></i
            ></span>
            <span class="btn-inner--icon d-block pt-2">学生</span>
          </a>
          <a href="javascript:;" class="btn btn-square text-sm">
            <span class="btn-inner--icon d-block"
              ><i class="bi bi-columns bi-2x"></i
            ></span>
            <span class="btn-inner--icon d-block pt-2">排版</span>
          </a>
          <a href="javascript:;" class="btn btn-square text-sm">
            <span class="btn-inner--icon d-block"
              ><i class="bi bi-files bi-2x"></i
            ></span>
            <span class="btn-inner--icon d-block pt-2">资料</span>
          </a>
          <a href="javascript:;" class="btn btn-square text-sm">
            <span class="btn-inner--icon d-block"
              ><i class="bi bi-receipt bi-2x"></i
            ></span>
            <span class="btn-inner--icon d-block pt-2">就业</span>
          </a>
          <a href="javascript:;" class="btn btn-square text-sm">
            <span class="btn-inner--icon d-block"
              ><i class="bi bi-gear bi-2x"></i
            ></span>
            <span class="btn-inner--icon d-block pt-2">设置</span>
          </a>
        </div>
        <!-- Misc area -->
        <div class="card bg-gradient-warning">
          <div class="card-body">
            <h5 class="text-white">哈喽, 朋友!</h5>
            <p class="text-white mb-4">
              为什么不现在开始学习前端，创造一些令人惊叹的东西呢？
            </p>
            <a
              href="http://itcast.cn"
              class="btn btn-sm btn-block btn-white rounded-pill"
              target="_blank"
              >Get started</a
            >
          </div>
        </div>
      </div>
      <div class="main-content position-relative">
        <nav
          class="navbar navbar-main navbar-expand-lg navbar-dark navbar-border"
          id="navbar-main"
        >
          <div class="container-fluid">
            <!-- Navbar nav -->
            <div
              class="collapse navbar-collapse navbar-collapse-fade"
              id="navbar-main-collapse"
            >
              <ul class="navbar-nav align-items-lg-center">
                <!-- Home  -->
                <li class="nav-item">
                  <a class="nav-link pl-lg-0" href="./index.html"> 首页 </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pl-lg-0" href="./index.html"> 传智教育 </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pl-lg-0" href="./index.html">
                    黑马程序员
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pl-lg-0" href="./index.html"> 文档 </a>
                </li>
              </ul>
              <!-- Right menu -->
              <ul
                class="navbar-nav ml-lg-auto align-items-center d-none d-lg-flex"
              >
                <li class="nav-item dropdown dropdown-animate">
                  <a
                    class="nav-link pr-lg-0"
                    href=".dropdown-menu"
                    role="button"
                    data-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="false"
                  >
                    <div class="media media-pill align-items-center">
                      <span class="avatar rounded-circle">
                        <img
                          alt="Image placeholder"
                          src="https://yanxuan-item.nosdn.127.net/8b27deb1670c53e67c42ca3e1ed6fd12.jpg"
                        />
                      </span>
                      <div class="ml-2 d-none d-lg-block">
                        <span
                          class="mb-0 text-sm font-weight-bold"
                          id="username"
                          >Admin</span
                        >
                      </div>
                    </div>
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pl-lg-0" id="logout" href="javascript:;">
                    退出
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
        <div class="page-content">
          <div class="page-title mb-3">
            <div class="row justify-content-between align-items-center">
              <div class="col-md-6 mb-3 mb-md-0">
                <h5 class="h3 font-weight-400 mb-0 text-white">Students</h5>
                <span class="text-sm text-white opacity-8"
                  >一共有 <b class="total">0</b> 位学员</span
                >
              </div>
              <div
                class="col-md-6 d-flex align-items-center justify-content-between justify-content-md-end"
              >
                <a
                  id="openModal"
                  href="javascript:;"
                  class="btn btn-sm btn-white btn-icon-only rounded-circle ml-4"
                >
                  <span class="btn-inner--icon"
                    ><i class="bi bi-plus bi-2x"></i
                  ></span>
                </a>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="card card-fluid">
                <div class="table-responsive" style="min-height: 1000px">
                  <table class="table align-items-center">
                    <thead>
                      <tr>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>性别</th>
                        <th>组号</th>
                        <th>期望薪资</th>
                        <th>就业薪资</th>
                        <th>籍贯</th>
                        <th>操作</th>
                      </tr>
                    </thead>
                    <tbody class="list">
                      <!-- <tr>
                      <td>张杰</td>
                      <td>20</td>
                      <td>男</td>
                      <td>第2组</td>
                      <td>10000</td>
                      <td>13000</td>
                      <td>北京北京市东城区</td>
                      <td>
                        <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen"></i></a>
                        <a href="javascript:;" class="text-danger"><i class="bi bi-trash"></i></a>
                      </td>
                    </tr> -->
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <!-- footer -->
          <div class="footer pt-5 pb-4 footer-light" id="footer-main">
            <div class="row text-center text-sm-left align-items-sm-center">
              <div class="col-sm-6">
                <p class="text-sm mb-0">
                  © 2022
                  <a href="https://itcast.cn" class="h6 text-sm" target="_blank"
                    >前端学科</a
                  >. All rights reserved.
                </p>
              </div>
              <div class="col-sm-6 mb-md-0">
                <ul class="nav justify-content-center justify-content-md-end">
                  <li class="nav-item">
                    <a class="nav-link" href="#">Support</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Terms</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link pr-0" href="#">Privacy</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- add Modal -->
    <div class="modal fade" id="modal">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">添加学员</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <form id="form" class="g-3 row" autocomplete="off" novalidate>
              <div class="col-sm-6">
                <div class="form-group">
                  <label class="input-group-label">姓名：</label>
                  <input
                    type="text"
                    name="name"
                    class="form-control"
                    placeholder="请输入姓名"
                  />
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label class="input-group-label">性别：</label>
                  <div class="input">
                    <div class="form-check d-inline-block">
                      <input
                        value="0"
                        checked
                        id="cb01"
                        class="form-check-input"
                        type="radio"
                        name="gender"
                      />
                      <label for="cb01" class="form-check-label">男</label>
                    </div>
                    <div class="form-check d-inline-block">
                      <input
                        value="1"
                        id="cb02"
                        class="form-check-input"
                        type="radio"
                        name="gender"
                      />
                      <label for="cb02" class="form-check-label">女</label>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label class="input-group-label">年龄：</label>
                  <input
                    type="text"
                    name="age"
                    class="form-control"
                    placeholder="请输入年龄"
                  />
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label class="input-group-label">组号：</label>
                  <input
                    type="text"
                    name="group"
                    class="form-control"
                    placeholder="请输入1-8组号"
                  />
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label class="input-group-label">期望薪资：</label>
                  <input
                    type="text"
                    name="hope_salary"
                    class="form-control"
                    placeholder="请输入期望薪资"
                  />
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label class="input-group-label">就业薪资：</label>
                  <input
                    type="text"
                    name="salary"
                    class="form-control"
                    placeholder="请输入就业薪资"
                  />
                </div>
              </div>
              <div class="col-sm-12">
                <div class="form-group">
                  <label class="input-group-label">籍贯：</label>
                  <div class="input pl-0">
                    <select class="form-select custom-select" name="province">
                      <option value="">--省份--</option>
                    </select>
                    <select class="form-select custom-select" name="city">
                      <option value="">--城市--</option>
                    </select>
                    <select class="form-select custom-select" name="area">
                      <option value="">--地区--</option>
                    </select>
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              取消
            </button>
            <button type="button" class="btn btn-blue" id="submit">确认</button>
          </div>
        </div>
      </div>
    </div>
    <!-- toast -->
    <div
      class="position-fixed top-0 start-50 pt-4"
      style="z-index: 999; transform: translateX(-50%)"
    >
      <div id="myToast" class="toast bg-rgba">
        <div class="toast-body">提示消息</div>
      </div>
    </div>
    <script src="./bootstrap/bootstrap.min.js"></script>
    <script src="./lib/axios.js"></script>
    <script src="./lib/form-serialize.js"></script>
    <script src="./js/common.js"></script>
    <script>
      const token = localStorage.getItem("CMS85");
      if (!token) {
        location.href = "./login.html";
      }
      const username = localStorage.getItem("CMS-USERNAME");
      document.querySelector("#username").innerHTML = username;
      document.querySelector("#logout").addEventListener("click", function () {
        if (confirm("是否确认退出")) {
          location.href = "./login.html";
          localStorage.clear();
        }
      });
    </script>

    <script>
      //获取tbody
      const tbody = document.querySelector("tbody.list");

      const getStudentList = () => {
        axios({
          url: "/students",
        }).then((res) => {
          // console.log(res);
          //总共有多少个学生
          document.querySelector(".total").innerHTML = res.data.length;
          //渲染数据
          tbody.innerHTML = res.data
            .map(
              (item) => `
          <tr>
                      <td>${item.name}</td>
                      <td>${item.age}</td>
                      <td>${item.gender === 0 ? "男" : "女"}</td>
                      <td>${item.group}组</td>
                      <td>${item.hope_salary}</td>
                      <td>${item.salary}</td>
                      <td>${item.province + item.city + item.area}</td>
                      <td>
                        <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id='${
                          item.id
                        }'></i></a>
                        <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id='${
                          item.id
                        }'></i></a>
                      </td>
                    </tr>
          `
            )
            .join("");
        });
      };
      getStudentList();

      // 2.删除功能
      // 2.1需要给tbody注册事件 采用事件委托的形式
      //2.2判断是不是删除借助类名
      // 2.3提示用户是否确认要删除
      const title = document.querySelector(".modal-title");
      tbody.addEventListener("click", function (e) {
        if (e.target.classList.contains("bi-trash")) {
          const id = e.target.dataset.id;
          if (!confirm("是否确认删除")) {
            return;
          }
          axios({
            url: `students/${id}`,
            method: "delete",
          })
            .then((res) => {
              show("删除成功");
              // console.log(res);
              getStudentList();
            })
            .catch((err) => {
              show(err.response.data.message);
            });
        }
        if (e.target.classList.contains("bi-pen")) {
          //给模态框的确定按钮自定义属性
          {
            document.querySelector("#submit").dataset.id = e.target.dataset.id;
            myModal.show();
            title.innerHTML = "编辑学员";
            //发送ajax根据id获取学生的详情数据
            axios.get(`/students/${e.target.dataset.id}`).then((res) => {
              for (let k in res.data) {
                //根据K利用 属性选择器获取dom元素
                //先k利用属性选择器 获取dom元素
                const dom = document.querySelector(`[name=${k}]`);
                if (dom && k != "gender") {
                  document.querySelector(`[name=${k}]`).value = res.data[k];
                }
              }
              //根据 服务器响应回来的数据 确定是哪一个单选框选择
              if (res.data.gender === 0) {
                document.querySelector("#cb01").checked = true;
              } else {
                document.querySelector("#cb02").checked = true;
              }

              const city = document.querySelector("[name=city]");
              const area = document.querySelector("[name=area]");

              const cityName = res.data.city;
              const areaName = res.data.area;

              axios({
                url: "/api/city",
                params: {
                  pname: res.data.province,
                },
              }).then((res) => {
                city.innerHTML = "<option>--城市--</option>";
                city.innerHTML += res.data
                  .map((item) => `<option value="${item}">${item}</option>`)
                  .join("");
                city.value = cityName;
              });

              axios({
                url: "/api/area",
                params: {
                  pname: res.data.province, //省份的名字
                  cname: cityName, //城市的名字
                },
              }).then((res) => {
                area.innerHTML = "<option>--区县-</option>";
                area.innerHTML += res.data
                  .map((item) => `<option value="${item}">${item}</option>`)
                  .join("");
                area.value = areaName;
              });
            });
          }
        }
      });

      //3.添加功能
      var myModal = new bootstrap.Modal(document.getElementById("modal"), {
        keyboard: false,
      });
      document
        .querySelector("#openModal")
        .addEventListener("click", function () {
          //显示模态框
          myModal.show();
          title.innerHTML = "添加学员";
          document.querySelector("#submit").removeAttribute("data-id");
        });

      //封装函数 省市区 三级联动
      const pro = document.querySelector('[name="province"]');

      const initCity = () => {
        //1.显示省份发送ajax请求
        //2.显示所有省份
        axios({
          url: "api/province",
        }).then((res) => {
          pro.innerHTML += res.data.map(
            (item) => `<option value="${item}">${item}</option>`
          );
        });

        const city = document.querySelector('[name="city"]');
        const area = document.querySelector('[name="area"]');

        //1.给pro省份 注册chnage事件
        pro.addEventListener("change", function () {
          city.innerHTML = "<option>--城市--</option>";
          area.innerHTML = "<option>--城市--</option>";

          axios({
            url: "api/city",
            params: {
              pname: this.value,
            },
          }).then((res) => {
            city.innerHTML += res.data
              .map((item) => `<option value="${item}">${item}</option>`)
              .join("");
          });
        });

        //1.给city省份注册change事件
        //2.发送ajax请求获取指定的区域列表
        city.addEventListener("change", function () {
          area.innerHTML = "<option>--城市--</option>";
          axios({
            url: "api/area",
            params: {
              pname: pro.value,
              cname: this.value,
            },
          }).then((res) => {
            area.innerHTML += res.data.map(
              (item) => `<option value="${item}">${item}</option>`
            );
          });
        });
      };
      initCity();

      //关闭模态框  清空表单里面的数据
      //获取模态框1dom元素
      var myModalEl = document.querySelector("#modal");
      //给模态框dom元素注册事件 当关闭模态框是  事件就会被触发
      myModalEl.querySelector("hide.bs.modal", function () {
        //清空表单
        document.querySelector("#form").rest();
      });

      //添加功能
      //获取到确定按钮 注册点击事件
      //收集表单数据
      document.querySelector("#submit").addEventListener("click", function () {
        const data = serialize(document.querySelector("#form"), { hash: true });
        
        //获取确认按钮
        const id = document.querySelector("#submit").dataset.id;

        //age gender group hope_salary salary 应该都是number类型
        data.age = +data.age;
        data.gender = +data.gender;
        data.group = +data.group;
        data.hope_salary = +data.hope_salary;
        data.salary = +data.salary;

        // 定义url和method变量
        let url = "/students";
        let method = "post";

        if (id) {
          url = `/students/${id}`;
          method = "put";
        }
        axios({
          url,
          method,
          data
        })
          .then((res) => {
            getStudentList();
            myModal.hide();
          })
          .catch((err) => {
            show(err.response.data.message);
          });
      });
    </script>
  </body>
</html>
